<template>
  <section>
    <div style="background-color: #e9fcfa;padding:5px  8px;">
      <div style="font-size: 13px;font-weight: bold">调整文档顺序</div>
      <div style="font-size: 1em">
        调整文档顺序，使文档排列在当前对话框中选中的文档之前。
      </div>
    </div>
    <page-table
      :page-data="articleList"
      :loading="loading"
      :do-get-page-data="getArticleList"
    >
      <el-table-column label="" width="100">
        <template slot-scope="scope">
          <el-radio
            :label="scope.row.articleID"
            v-model="curArticleId"
            @change.native="getTemplateRow(scope.$index, scope.row)"
            >&nbsp
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="文章标题"
        align="left"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="审核状态"
        align="center"
        width="100"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div :class="statusStyle(scope.row)">
            {{ scope.row.status | keyText("ARTICLE_STATUS") }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="发布时间"
        width="200"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
    </page-table>
    <div class="footer">
      <el-button size="mini" type="primary" @click="save">确定 </el-button>
      <el-button size="mini" type="info" @click="close">取消 </el-button>
    </div>
  </section>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "sortArticle",
  props: {
    columnId: Number,
    dragArticleIds: Array
  },
  created() {
    this.getArticleList();
  },
  data() {
    return {
      loading: false,
      curArticleId: 0,
      articleDto: {
        articleType: "", //属性
        categoryId: this.columnId, //栏目编号
        basicTitle: "", //文章标题
        pageNumber: 1,
        pageSize: 10
      }
    };
  },
  computed: {
    ...mapGetters({
      articleList: "articleList"
    })
  },
  methods: {
    save() {
      if (null === this.curArticleId || this.curArticleId <= 0) {
        this.warning("请选择要移动的位置");
        return;
      }
      let par = {
        dragArticleIds: this.dragArticleIds,
        goalArticleId: this.curArticleId
      };
      this.API.articleSortUsingPOST({ article: par }).then(res => {
        this.success("操作成功");
        this.close();
      });
    },
    getTemplateRow(index, row) {
      this.curArticleId = row.articleID;
    },
    close() {
      this.$emit("close");
    },
    //文章列表
    getArticleList(search) {
      this.loading = true;

      let data = Object.assign(this.articleDto, search);
      this.$store
        .dispatch("listArticleUsingPOSTS", { article: data })
        .then(ret => {
          console.log("eee", ret.data);
          this.loading = false;
        });
    },
    // 状态颜色设置
    statusStyle(row) {
      let cls = "";
      switch (row.status) {
        case "AUDIT":
          cls = "status_new";
          break;
        case "PUBLISHED":
          cls = "status_audit";
          break;
        case "REJECT":
          cls = "status_reject";
          break;
      }
      return cls;
    }
  }
};
</script>

<style scoped>
.footer {
  text-align: right;
  box-sizing: border-box;
}
</style>
